<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页头部</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#FFF;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <template v-if="list!=null">
                <template v-if="list.length>0">
                    <ul class="task">
                        <li @click="navTaskDetail(item.id)" v-for="(item,index) in list" :key="index" class="clearfix" :class="item.is_able_accept?'':'whiteBg'">
                            <div class="icon">
                                <img :src="item.platform?item.platform.icon:''" class="icon" />
                            </div>
                            <div class="info">
                                <div class="task_title disbox">
                                    <h3 class="disflex ell">{{item.title}}</h3>
                                    <b>+{{$.parsePrice(item.amount_actual)}}</b>
                                </div>
                                <div class="tags">
                                  <div class="li">{{item.platform?item.platform.name:'' }}{{item.project?item.project.name:''}}</div>
                                  <div class="li" v-if="item.diffculty_level">{{item.diffculty_level | getDiffcultyLevelName}}</div>
                                  <!--div class="grade"><img src="../../../image/my/v3.png" />Lv3以上可接</div-->
                                </div>
                            </div>
                            <div class="progress">
                                <i class="over" :style="{width:(item.total_accepts-item.total_surplus_accepts)/item.total_accepts*100+'%' }" ></i>
                            </div>
                        </li>
                    </ul>
                    <div class="loadText">
                        <div class="weui-loadmore" v-if="has_more">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                        <span v-else class="over">我已经到底啦！</span>
                    </div>
                </template>
                <template v-else>
                    <section class="m-no">
                        <div class="u-img"></div>
                        <div class="u-spec">暂无数据</div>
                    </section>
                </template>
            </template>
            <template v-else>
                <div class="loadFull" v-if="load">
                    <div class="loadLayer"><span></span> <span></span> <span></span> <span></span> <span></span></div>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    page:1,//当前页数
                    has_more:true,//是否还有更多
                    list:null,//列表
                    word:"",
                    load:api.pageParam.load,
                    loading:false,//是否处于加载中
                },
                filters: {
                    getDiffcultyLevelName: function(lv){
                        return ['', '初级', '中级', '高级'][~~lv];
                    },
                },
                methods:{
                    getData(){
                        var that = this;
                        if(that.has_more && !that.loading){
                            that.loading = true;
                            $.ajax({
                                url:"/task/search?word="+that.word+"&is_recommand=true&page=1&sort=time&page=" + that.page,
                                success:function(res){
                                    that.has_more = res.data.has_more;
                                    if(that.page==1){
                                        that.list = (res.data.records);
                                    }else{
                                        that.list = that.list.concat(res.data.records);
                                    }
                                    if(res.data.has_more){
                                        that.page++;
                                    }
                                },
                                done:function(){
                                    that.loading = false;
                                }
                            });
                        }
                    },
                    resetPageParam(){
                        var that = this;
                        that.page = 1;
                        that.has_more = true;
                        that.getData();
                    },
                    navTaskDetail(taskId) {
                        $.openUrl('common/commonTitle','task/detail',{title:'任务详情', topShare: true, taskId: taskId,allowEdit:true});
                    },
                    setItemDisabled: function(id, status){
                        var list = this.list;
                        for(var i=0; i<list.length; i++){
                            if(list[i].id == id){
                                this.$set(this.list[i], 'is_able_accept', status);
                                break;
                            }
                        }
                    },
                },
                mounted(){
					$.initJs(this);
                }
            });

            api.addEventListener({
                name: 'searchKeyword'
            }, function(ret, err){
                app.word = ret.value.word;
                app.load = true;
                app.list = null;
                app.resetPageParam();
            });

            api.addEventListener({
			    name: 'updateHomeTaskItemIsAbleAccept'
			}, function(ret, err){
                if(!ret){
                    return false;
                }
                var taskId = ret.value.taskId;
                var status = ret.value.isAbleAccept;
			    app.setItemDisabled(taskId, status);
            });

            //下拉刷新
            $.pullDown({
                success:function(){
                    app.load = false;
                    app.resetPageParam();
                }
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{
                    threshold:10
                }
            }, function(ret, err){
                app.getData();
            });
        }
    </script>
</body>
</html>
